<template>
	<view class="content">
		<view class="bar" :style="'height:'+statusHeight+'px'"></view>
		<uni-nav-bar backgroundColor="none" title="我的" border="false">
		</uni-nav-bar>
		<view class="info">
			<image src="../../static/user/user.png" class="img" v-if="token"></image>
			<navigator url='/pages/login/login' class="img" style="line-height: 150rpx;" v-else>登录</navigator>
			<view style="font-size: 24rpx;margin-top: 8rpx;" v-if="info.data.identity!=='user'&&token">
				身份:{{info.data.identity}}
			</view> 
			<view class="name">
				{{info.data.nickname}}
			</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="b_item_left">
					<image class="icon" src="../../static/icon/info.png" mode="aspectFit"></image>
					<view>个人信息</view>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
			<view class="item">
				<view class="b_item_left">
					<image class="icon" src="../../static/icon/us.png" mode="aspectFit"></image>
					<view>关于APP</view>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
			<view class="item" @click="loginout" v-if="token">
				<view class="b_item_left">
					<image class="icon" src="../../static/icon/out.png" mode="aspectFit"></image>
					<view>退出登录</view>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from 'vue'
	import request from '../../api/request'
	let statusHeight=ref('')
	let info=reactive({
		data:{}
	})
	let token=ref('')
	onLoad((option)=>{
		uni.getSystemInfo({
			success: function(res) {
				statusHeight.value = res.statusBarHeight
			}
		})
	})
	onShow(()=>{
		info.data=uni.getStorageSync('info')
		token.value=uni.getStorageSync('token')
	})
	const loginout=()=>{
		info.data={}
		token.value=''
		uni.removeStorageSync('token')
		uni.removeStorageSync('info')
		uni.showToast({
			duration:1500,
			icon:"none",
			title:'退出成功'
		})
		
	}
	
	
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		height: 100vh;
		width: 100vw;
		// padding: 30rpx;
		background: linear-gradient(to top, #f5f5f5 60%, #C7FFF2 93%, #A6DEFF 100%);
		.uni-navbar {
			.uni-navbar__content {
				border: 0 none !important;
			}
		}
		

		.bar {
			width: 100%;
		}

		.info {
			margin:0 30rpx;

			.img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				margin: 0 auto;
				background-color: #0b96ff;
				color: white;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			}

			.name {
				margin-top: 10rpx;
				font-size: 40rpx;
			}

			view {

				color: #666666;
			}

			text-align: center;
		}

		.list {
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			margin: 50rpx 30rpx;
			border-radius: 16rpx;
			background-color: white;

			.item {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				padding: 35rpx 24rpx;
				border-bottom: #F4F4F4 1rpx solid;

				.b_item_left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 28rpx;

					.icon {
						width: 50rpx;
						height: 50rpx;
					}

					view {
						margin-left: 10rpx;
					}
				}
			}
		}



	}
</style>
